<template>
  <div class="margin-top-sm">
    <!-- table -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="标签名称">
        <template slot-scope="scope">
          <span
            @dblclick="handleDouble(scope.$index, scope.row)"
            v-show="!scope.row.is_edit"
            >{{ scope.row.tag_name }}</span
          >
          <el-input
            v-model="editValue"
            v-show="scope.row.is_edit"
            @blur="handleBlur(scope.$index, scope.row)"
            @keyup.enter.native="$event.target.blur"
            :autofocus="true"
            clearable
            :ref="'valueinput' + scope.$index"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="是否显示"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_show | statusFilter">{{
            scope.row.is_show ? "显示" : "未显示"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加时间" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time | dateTimeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="显示" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show"
            @change="handleChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="margin-top">
      <el-pagination
        @current-change="handlePageChange"
        background
        layout="prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  articleTag,
  articleTagChange,
  articleTagUpdate,
  articleTagDelete,
} from "@/api/article";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = ["success", "info"];
      return status ? statusMap[0] : statusMap[1];
    },
  },
  data() {
    return {
      editValue: "",
      formParams: {
        page: 1,
        limit: 10,
      },
      list: [],
      count: 0,
      listLoading: true,
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //双击事件
    handleDouble(index, row) {
      this.list[index].is_edit = true;
      this.editValue = row.tag_name;
      setTimeout(() => {
        //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
        this.$refs["valueinput" + index].focus();
      }, 1);
    },
    //输入框失去焦点
    handleBlur(index, row) {
      this.list[index].is_edit = false;

      if (this.list[index].tag_name == this.editValue) return;
      let id = this.list[index].id;
      let tag_name = this.editValue;
      // console.log(id, tag_name);
      articleTagUpdate({ id: id, tag_name: tag_name })
        .then((res) => {
          this.list[index].tag_name = this.editValue;
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 删除
    handleDelete(row) {
      // console.log(row, "row");
      // this.dialogVisible = true;
      this.$confirm("此操作将永久删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(row, "row===");
          articleTagDelete({ id: row })
            .then((res) => {
              this.$message.success(res.msg);
              this.loadData();
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        })
        .catch(() => {
          // this.$message.info("已取消删除");
        });
    },
    //页数改变
    handlePageChange(index) {
      this.formParams.page = index;
      this.loadData();
    },
    //改变状态
    handleChange(row) {
      let datas = {
        id: row.id,
        is_show: row.is_show ? "1" : "0",
      };
      articleTagChange(datas)
        .then((res) => {
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    //加载数据
    loadData() {
      this.listLoading = true;
      articleTag(this.formParams)
        .then((res) => {
          // console.log(res);
          this.list = res.data.data;
          this.count = res.data.count;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
          this.$message.error("加载失败");
        });
    },
  },
};
</script>
